<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">
        学生列表<span v-if="isAdmin"
          >[<el-button
            type="text"
            @click="goToInput"
            style="text-decoration: underline"
            >跳转数据录入页</el-button
          >]</span
        >
        <el-button
          icon="el-icon-search"
          circle
          type="primary"
          size="mini"
          @click="openDialog"
        ></el-button>
      </div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="table" @click="scrollClick($event)">
            <table
              border="0"
              cellpadding="0"
              cellspacing="0"
              class="table-header"
            >
              <tbody>
                <tr>
                  <td width="30%">
                    <span>姓 名</span>
                  </td>
                  <td width="30%">
                    <span>照 片</span>
                  </td>
                  <td width="40%">
                    <span>学 号</span>
                  </td>
                </tr>
              </tbody>
            </table>

            <vue-seamless-scroll
              :data="listData"
              class="seamless-warp"
              :class-option="optionSetting"
            >
              <table border="0" cellpadding="0" cellspacing="0" class="item">
                <tbody>
                  <tr v-for="(item, index) in listData" :key="index">
                    <td
                      width="100%"
                      class="title"
                      :data-obj="JSON.stringify(item)"
                    >
                      <span>{{ item.stuName }}</span>
                    </td>
                    <td width="30%" :data-obj="JSON.stringify(item)">
                      <img
                        :src="item.imgUrl"
                        style="width: 100px; height: 100px"
                      />
                    </td>
                    <td width="40%" :data-obj="JSON.stringify(item)">
                      <span>{{ item.grade }}</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="选择当前需要展示的学生"
      :append-to-body="true"
      :visible.sync="showList"
      :before-close="closeDialog"
      width="60%"
      :center="true"
      :fullscreen="false"
    >
      <div class="app-container">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="姓名" prop="stuName">
            <el-input
              v-model="queryParams.stuName"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="学号" prop="stuId">
            <el-input
              v-model="queryParams.stuId"
              placeholder="请输入学号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-table
          v-loading="loading"
          :data="infoList"
          height="290"
          @selection-change="handleSelectionChange"
          @row-click="rowClick"
          ref="tb"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="姓名" align="center" prop="stuName" />
          <el-table-column label="学号" align="center" prop="stuId" />
          <el-table-column label="照片" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.imgUrl" class="stu-img" />
            </template>
          </el-table-column>
          <el-table-column label="照片URL" align="center" prop="imgUrl" />
          <el-table-column label="班级" align="center" prop="grade" />
          <el-table-column label="备注" align="center" prop="remark" />
        </el-table>

        <Pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" :disabled="single"
          >确 定</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { getStudentInfo } from "@/api/stuInfo";
import Cookies from "js-cookie";
// 分页组件
import Pagination from "@/components/Pagination";

export default {
  name: "studentInfo",
  components: {
    vueSeamlessScroll,
    Pagination,
  },
  data() {
    return {
      listData: [],
      showList: false,
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 学生信息表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        stuName: null,
        stuId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      currentStudent: null,
      multipleSelection: []
    };
  },
  computed: {
    optionSetting() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // autoPlay: false,
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    isAdmin() {
      const username = Cookies.get("username");
      return username === "admin";
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    scrollClick(e) {
      let item = JSON.parse(e.target.dataset.obj);
      this.$emit("changeItem", item);
      console.log("changeItem", item);
    },
    goToInput() {
      window.location.href = "http://localhost:81/system/studentInfo";
    },
    getData() {
      getStudentInfo({
        pageNum: 1,
        pageSize: 100,
      }).then((res) => {
        this.listData = res.rows || [];
      });
    },
    openDialog() {
      this.showList = true;
      this.getList();
    },
    /** 查询学生信息列表 */
    getList() {
      this.loading = true;
      getStudentInfo(this.queryParams).then((response) => {
        this.infoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    closeDialog() {
      this.showList = false;
      this.queryParams.stuId = null;
      this.queryParams.stuName = null;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.stuId = null;
      this.queryParams.stuName = null;
      this.handleQuery();
    },
 
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.single = !(selection.length === 1);
      if (selection.length > 1) {
        this.$refs.tb.clearSelection();
        this.$refs.tb.toggleRowSelection(selection.pop());
      }

      if (!this.single) {
        this.currentStudent = selection[0];
      } else {
        this.currentStudent = {}
      }
    },
    rowClick(row) { 
      //   选已选中数据中判断当前点击的是否被选中
      if (this.multipleSelection[0] == row) {  // 选中的是已有的 取消选中
        this.multipleSelection = [];
        this.$refs['Table'].clearSelection();
      } else {
        this.multipleSelection = [row];
        this.$refs.tb.clearSelection();
        this.$refs.tb.toggleRowSelection(row, true);
      }
    },
    confirm() {
      const item = this.currentStudent;
      this.$emit("changeItem", item);
      this.closeDialog()
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.sn-container {
  left: 1370px;
  top: 94px;
  height: 260px;
  %table-style {
    width: 100%;
    height: 35px;
    table-layout: fixed;
    tr {
      cursor: pointer;
      td {
        padding: 0px 5px;
        text-align: center;
        background-color: transparent;
        white-space: nowrap;
        overflow: hidden;
        color: #e2e5ff;
        font-size: 20px;
        margin-top: 40px;
      }
    }
  }
  .table {
    .table-header {
      @extend %table-style;
    }
    .seamless-warp {
      height: 400px;
      overflow: hidden;
      visibility: visible;
      .colorRed {
        color: #ff4669;
      }
      .colorOrange {
        color: #ffc956;
      }
      .item {
        height: auto;
        @extend %table-style;
        tr {
          td {
            &.title {
              text-overflow: ellipsis;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
.stu-img {
  cursor: pointer;
  width: 60px;
  height: 60px;
  border-radius: 10px;
}
</style>
